<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        table, tr, td, h2 {
            margin: 0 auto;
            width: 800px;
        }

        table, tr, td {
            border: 1px solid seagreen;
            border-collapse: collapse;
        }

    </style>
</head>
<body>
<h2>新增页</h2>
<form action="/tPerson/save" method="post">
    <input type="hidden" name="personID" th:value="${tPerson?.personID}"/>
    <table>
        <caption>用户管理系统</caption>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name" th:value="${tPerson?.name}" size="20"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><select name="sex">
                <option name="choose" selected="selected">请选择</option>
                <option name="man" value="男">男</option>
                <option name="woman" value="女">女</option>
            </select></td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td><input type="text" name="birthday" th:value="${tPerson?.birthday}" size="20"/></td>
        </tr>
        <tr>
            <td>身份证号：</td>
            <td><input type="text" name="IDCard" th:value="${tPerson?.IDCard}" size="20"/></td>
        </tr>
        <tr>
            <td style="text-align: center" colspan="2">
                <input type="submit" value="保存"/>&nbsp;
                <input type="button" onclick="history.go(-1);" value="取消"/>
            </td>
        </tr>
    </table>
</form>
<form action="/tPerson/saveWork" method="post">
    <table>
        <caption>工作经历</caption>
        <tr>
            <td><input id="create" type="button" onclick="createInput()" value="添加工作经历"/></td>
        </tr>
        <tr>
            <td>开始时间</td>
            <td>结束时间</td>
            <td>从事岗位</td>
            <td>工作内容</td>
            <td>操作</td>
        </tr>

        <input type="hidden" name="personID" th:value="${tPerson?.personID}"/>
        <tr th:each="tPersonWork,iterStat: ${tPersonWorkList}">
            <td><input type="text" name="startDate" th:value="${tPersonWork?.startDate}" size="20"/></td>
            <td><input type="text" name="endDate" th:value="${tPersonWork?.endDate}" size="20"/></td>
            <td><input type="text" name="post" th:value="${tPersonWork?.post}" size="20"/></td>
            <td><input type="text" name="desc" th:value="${tPersonWork?.desc}" size="20"/></td>
            <td>
                <input type="submit" value="添加"/>&nbsp;
            </td>
        </tr>
        <tr id="workInsert">
        </tr>
    </table>
</form>
<script>
    function createInput() {
        var new_div = document.getElementById("workInsert");
        var i = 0;
        var text = '<div name="work'+i+'">   <input type="hidden" name="personID" th:value="${tPerson?.personID}"/>\n' +
            '            <td><input type="text" name="startDate" th:value="${tPersonWork?.startDate}" size="20"/></td>\n' +
            '            <td><input type="text" name="endDate" th:value="${tPersonWork?.endDate}" size="20"/></td>\n' +
            '            <td><input type="text" name="post" th:value="${tPersonWork?.post}" size="20"/></td>\n' +
            '            <td><input type="text" name="desc" th:value="${tPersonWork?.desc}" size="20"/></td>\n' +
            '            <td>\n' +
            '                <input type="submit" value="添加"/>&nbsp;\n' +
            '            </td>' +
            '</div> ';
        new_div.innerHTML = text;
    }
</script>
</body>
</html>